<template>
  <div class="header">
    <div
      style="background:#ff5777ed;color:white;fontSize:22px;text-align:center;height:50px;width:100%;line-height:50px;position:fixed;top:0px;left:0px;"
    >商品分类</div>
    <div class="header">
      <!-- //标题 -->
      <ul class="classify">
        <li @click="cur=0">正在流行</li>
        <li @click="cur=1">上衣</li>
        <li @click="cur=3">裤子</li>
        <li @click="cur=4">裙子</li>
        <li @click="cur=5">内衣</li>
        <li @click="cur=6">女鞋</li>
        <li @click="cur=7">包包</li>
        <li>美妆</li>
        <li>男装</li>
        <li>女装</li>
        <li>风衣</li>
        <li>大衣</li>
      </ul>

      <!-- //内容 -->
      <div class="list">
        <div v-show="cur==0">
          <ul class="list2">
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
          </ul>
        </div>

        <div v-show="cur==1">
          <ul class="list2">
            <li>
              <img
                src=" https://s5.mogucdn.com/mlcdn/c45406/190719_3517232ba5aadhh92chfd3hc38hl8_640x960.jpg_640x854.v1cAC.40.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src=" https://s5.mogucdn.com/mlcdn/c45406/190719_3517232ba5aadhh92chfd3hc38hl8_640x960.jpg_640x854.v1cAC.40.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src=" https://s5.mogucdn.com/mlcdn/c45406/190719_3517232ba5aadhh92chfd3hc38hl8_640x960.jpg_640x854.v1cAC.40.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src=" https://s5.mogucdn.com/mlcdn/c45406/190719_3517232ba5aadhh92chfd3hc38hl8_640x960.jpg_640x854.v1cAC.40.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src=" https://s5.mogucdn.com/mlcdn/c45406/190719_3517232ba5aadhh92chfd3hc38hl8_640x960.jpg_640x854.v1cAC.40.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src=" https://s5.mogucdn.com/mlcdn/c45406/190719_3517232ba5aadhh92chfd3hc38hl8_640x960.jpg_640x854.v1cAC.40.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
          </ul>
        </div>

        <div v-show="cur==2">
          <ul class="list2">
            <li>
              <img
                src="https://s5.mogucdn.com/mlcdn/c45406/190417_54adhdf66h7lhl2610ddb6e6cj201_640x960.jpg_640x854.v1cAC.40.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
          </ul>
        </div>

        <div v-show="cur==3">
            <ul class="list2">
                <li>
              <img
                src="https://s5.mogucdn.com/mlcdn/c45406/200423_8c7kg320fc1i7dg63gdf2c5i8b64d_3800x5700.jpg_640x854.v1cAC.40.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
                <li>
              <img
                src="https://s5.mogucdn.com/mlcdn/c45406/200423_8c7kg320fc1i7dg63gdf2c5i8b64d_3800x5700.jpg_640x854.v1cAC.40.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>    <li>
              <img
                src="https://s5.mogucdn.com/mlcdn/c45406/200423_8c7kg320fc1i7dg63gdf2c5i8b64d_3800x5700.jpg_640x854.v1cAC.40.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            </ul>
        </div>

        <div v-show="cur==4">
          <ul class="list2">
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
          </ul>
        </div>

        <div v-show="cur==5">
          <ul class="list2">
              <li>
              <img
                src="https://s5.mogucdn.com/mlcdn/c45406/190417_54adhdf66h7lhl2610ddb6e6cj201_640x960.jpg_640x854.v1cAC.40.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
              <li>
              <img
                src="https://s5.mogucdn.com/mlcdn/c45406/190417_54adhdf66h7lhl2610ddb6e6cj201_640x960.jpg_640x854.v1cAC.40.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>  <li>
              <img
                src="https://s5.mogucdn.com/mlcdn/c45406/190417_54adhdf66h7lhl2610ddb6e6cj201_640x960.jpg_640x854.v1cAC.40.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>  <li>
              <img
                src="https://s5.mogucdn.com/mlcdn/c45406/190417_54adhdf66h7lhl2610ddb6e6cj201_640x960.jpg_640x854.v1cAC.40.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>  <li>
              <img
                src="https://s5.mogucdn.com/mlcdn/c45406/190417_54adhdf66h7lhl2610ddb6e6cj201_640x960.jpg_640x854.v1cAC.40.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
          </ul>
        </div>

        <div v-show="cur==6">
          <ul class="list2">
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
            <li>
              <img
                src="//img.alicdn.com/imgextra/i1/111429238/TB258ybb6QnBKNjSZSgXXXHGXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp"
                alt
              />
              <p>职场女装2019新款时尚气质</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Category",
  data() {
    return {
      cur: 0
    };
  }
};
</script>

<style scoped>
li {
  list-style: none;
}
.header {
  display: flex;
}
/* //375 */
.classify { 
  width: 100px;
  height: 900px;
  margin-top: 50px;
  background-color: rgba(0, 0, 0, 0.1);
  line-height: 50px;
  color: red;
  text-align: center;
  font-size: 18px;
}

.list {
  width:275px;
  height: 900px;
  margin-top: 50px;
}
.list ul li {
  margin: 5px 3px 15px 25px;
}
.list img {
  width: 100px;
  height: 100px;
}

.list p {
  width: 80px;
}
.list2 {
  display: flex;
  flex-wrap: wrap;
}
</style>
